<template>
    <div class="mock-paper-list" v-if="mockPaperList.length">
        <div class="item" v-for="(item, index) in mockPaperList" :key="item.batchId"
            :class="'item' + (index % 2 == 0 ? 1 : 2)" @click="doExercises(item)">
            <span>{{ item.batchName }}</span>
        </div>
    </div>
    <el-empty v-else description="暂无数据" />
</template>

<script setup>
// import { getPaperList } from '@/api/learn/practice.js'
import { getPaperList, createExamRecord, getMockExamList, createMockExam } from '@/api/learn/practice.js'
import { EXAM_MODEL } from '@/const/exam'
import { getToken } from '@/utils/auth'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const userInfo = ref({})

async function getUserInfo() {
    let userInfoRes = await userStore.getInfo()
    userInfo.value = userInfoRes.data.user
}
getUserInfo()

const props = defineProps({
    paperType: {
        type: [String, Number],
        default: EXAM_MODEL.MOCK
    }
})

const mockPaperList = ref([])
function getMockList() {
    getMockExamList({ type: props.paperType, pageSize: 100, pageNum: 1 }).then(res => {
        mockPaperList.value = res.list
    })
}
getMockList()

const { proxy } = getCurrentInstance()
const parseTime = proxy.parseTime // 格式化时间工具
function doExercises(row) {
    console.log(row);
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    createMockExam({ postId: row.postId, batchId: row.batchId, applicantId: userInfo.value.userId, applicationTime: parseTime(new Date()) }).then(res => {
        console.log(res)
        if (res && res.code == 200) {
            // const url = `${import.meta.env.VITE_APP_EXAM_URL}?model=${props.paperType}&paperId=${row.paperId}&recordId=${recordId}&t=${getToken()}$batchId=${res.batchId}`
            const url = `${import.meta.env.VITE_APP_EXAM_URL}?batchId=${row.batchId}&model=${props.paperType}&t=${getToken()}`
            window.open(url, 'target');
        }
        loading.close()
    }).catch(error => {
        console.error(error)
        loading.close()
    })

}
</script>
<style scoped lang="scss">
.mock-paper-list {
    .item {
        margin-bottom: 20px;
        height: 135px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;

        &.item1 {
            background: url('@/assets/images/learn-mock-paper-bg01.png') no-repeat;
            background-size: 100% 100%;
        }

        &.item2 {
            background: url('@/assets/images/learn-mock-paper-bg02.png') no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>